<!--本页面由uniapp切片工具生成，uni-app切片-可视化设计工具(一套代码编译到7个平台iOS、Android、H5、小程序)，软件下载地址：http://www.ymznkf.com/new_view_669.htm -->
<template>
	<view style="display: block;background-color: #FFFFFF;height: 100vh;">
		<view class="home_top"></view>
		<view class="search-box">
			<view style="width: 22%;color: #000000;text-align: start;padding-right: 10rpx;font-size: 34rpx;border-right: #CECECE solid 1rpx;"
				class="iconfont word-omit">
				&#xe612; {{city.city || "请登录"}}
			</view>
			<view class='search acea-row row-between-wrapper flex' style="width: 55%;">
				<text class='iconfont' style="color: #000000;font-size:55rpx;">&#xe66a;</text>
				<input :focus="false" type='text' style="width: 80%;background-color: #F7F7F7;height: 80rpx;" v-model='keyword' placeholder='输入关键词'
					placeholder-class='placeholder' />
			</view>
		</view>
		<view class="warp_center">
			<swiper indicator-dots="true" autoplay :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<image style="height: 320rpx;width: 90%;border-radius: 10rpx;" :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view style="margin-bottom: 0;">
			<notice :text="noticeMsg"></notice>
		</view>
		<view class="type">
			<view class="item" v-for="(item,index) in type" @click="topage(item)" :key="index">
				<image class="icon" :src="item.pic"></image>
				<view class="name" style="font-size: 24rpx;color: #666;">
					{{item.name}}
				</view>
			</view>
		</view>
<!-- 		
		<view class="big_box bg1">
			<view class="tips">一键报修</view>
			<view class="big_btn">
				<view class="btn" @click="jumpGuarantee">
					一键报修
				</view>
			</view>
		</view>
		<view class="kef mt20" @click="callphone('400-090-0880')">
			客服电话:400-090-0880
		</view>
		<view class="footer">
			<view style="color: #666;font-size: 30rpx;">合作伙伴:</view>
			<view class="foo_box">
				<view class="item" v-for="(item,index) in advList" @click="copy(item)" :key="index">
					<image :src="item.image" style="width: 180rpx;height: 90rpx;"></image>
					<view style="text-align: center;width: 180rpx;font-size: 20rpx;">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="line mt20"></view>
		<view class="kef" style="color: #007AFF;margin-top: -5rpx;font-size: 30rpx;" @click="jump(advList[0].link)">
			官网: https://www.b-st.cn
		</view> -->
<!-- 		<view style="height: 200rpx;"></view> -->
	</view>
</template>

<script>
	// import swiper from '../../swiper.vue'
	import notice from '../../an-notice-bar/an-notice-bar.vue'
	import {
		getIndexData,
		articleLists,
		articlemore,
		get_advertisement,
		getNewDeviceCategory
	} from '../../../api/api.js'
	// 定义全局参数,控制数据加载
	var _self, page = 1,
		timer = null;

	export default {
		components: {
			notice
		},

		name: "",
		data() {
			return {
				noticeMsg: "",
				indicatorDots: false,
				circular: true,
				autoplay: true,
				isBorader: false,
				id: null,
				uid: 3,
				statusBarHeight: "",
				loadingText: '',
				show: false,
				activeKey: 0,
				activeKey1: 0,
				animation: '',
				animationData: {},
				keyword: "",
				news: [],
				city: {},
				advList: [],
				banner: [],
				type: [],
				apiUrl: 'https://www.ymznkf.com/wx_server', //后端接口地址
				id: '', //传值使用,方便存在本地的locakStorage  
				del_id: '' //方便存在本地的locakStorage  
			}
		},

		created() {
			// 获取手机状态栏高度
			this.statusBarHeight = uni.getStorageSync('statusBarHeight')
			this.datainit()
			this.city = uni.getStorageSync('city') || '获取位置失败!'
			this.advList = uni.getStorageSync('advList')
		},
		onShow() {
			this.city = uni.getStorageSync('city') || '获取位置失败!'
			this.advList = uni.getStorageSync('advList')
			console.log(this.advList, '合作伙伴')
		},
		onLoad(options) {},
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据
			this.Refresh();
		},

		methods: {
			copy(e) {
				if (e.is_guanwang == 1) {
					uni.navigateTo({
						url: `/pages/webview/index?url=${e.link}`
					})
					return;
				}
				uni.setClipboardData({
					data: e.link, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});

			},
			confirm() {
				console.log('22232')
				this.$emit('search',1)
			},
			jump(e) {
				uni.navigateTo({
					url: `/pages/webview/index?url=${e}`
				})
			},
			// 拨打客服电话
			callphone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			// 获取首页信息
			datainit() {
				getIndexData().then(res => {
					console.log(res.data,"11111")
					this.type = res.data.menus
					let news = ''
					res.data.news.forEach(item => {
						news += item.info + '|'
					})
					this.noticeMsg = news
					res.data.banner.forEach(item => {
						item.image = item.pic
					})
					this.banner = res.data.banner
				})


			},
			// 去分类页
			topage(e) {
				if (e.ulr == 1) return uni.showToast({
					title: "开发中！"
				})
				uni.navigateTo({
					url: e.ulr
				})
			},
			jumpGuarantee() { // 跳转保修
				console.log(1);
				uni.navigateTo({
					url: `/`
				})
			},
			aaa() {
				uni.showLoading({
					title: "加载中",
					duration: 800
				})
			},
			// 跳转详情
			jumpDetail(e) {
				console.log(e)
				this.id = e.id
				uni.navigateTo({
					url: `/pages/homedetal/index?id=${this.id}&uid=${this.uid}`
				})
			},
			// 特殊跳转
			jumpDetail1(e) {
				console.log(e)
				this.id = e.id
				uni.navigateTo({
					url: `/pages/homedetal/index?id=${this.id}&uid=${this.uid}`
				})
			},
			// 页面跳转
			jumpTo(e) {
				uni.navigateTo({
					url: e
				})
			},

			// 处理数据
			dealurl(e) {
				return "https://xcx.ttpcm.com" + e
			},
			//刷新数据
			Refresh: function(_action) {
				uni.showLoading();
				//提交到服务器
				var that = this
				var url = that.apiUrl + '{server_code_file_path}';
				console.log(url);
				uni.request({
					url: url, //后端接口地址，需要改成自己的接口地址
					data: {
						action: _action, //上传动作，如按钮点击会产生click动作，分页也会产生，在后端根据具体的动作来判断事件
						uid: that.getUid(), //上传用户id,在登录中获得
						//上传页面中的变量
						//定义变量---start
						keyword: that.keyword,

						//定义变量---end
						id: that.id, //上传id值，后端可以根据此值来操作当前id
						del_id: that.del_id, //在列表中删除按钮选中时，上传到有后端，进行删除操作
						page: that.page
					},
					method: 'GET',
					success: function(res) { //后端返回数据

						// 隐藏导航栏加载框  
						uni.hideNavigationBarLoading();
						// 停止下拉动作  
						uni.stopPullDownRefresh();

						// 隐藏加载框  
						uni.hideLoading();

						var tmp = res.data;

						//初始化，对页面上的控件进行赋值操作
						if (_action == "init") {

						}
						that.keyword = tmp.keyword;
						//如果后端有返回消息，则弹出消息提示
						if (tmp.message != null && tmp.message != "") {
							uni.showToast({
								title: tmp.message,
								icon: 'none',
								duration: 2000
							})
						}



						//如果后端有返回页码，则更改当前页码
						if (tmp.page != null && tmp.page != "") {
							page = tmp.page;
						}

					},
					fail: function(res) {
						uni.showToast({
							title: "服务器访问失败",
							icon: 'none',
							duration: 2000
						})
						console.log(res.data);
						console.log('is failed')
					}
				})
			},
		}
	}
</script>


<style scoped lang="less">
	.search-box{
		padding-left: 20rpx;
		display: flex;
		background-color: #F7F7F7;
		height: 88rpx;
		width: 670rpx;
		margin: -23% 30rpx 0;
		align-items: center;
		border-radius: 8rpx;
	}
	.home_top {
		/* padding-left: -25px; */
		background-image: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		background-size: cover;
		width: 750upx;
		background-position-y: -160rpx;
		height: 210upx;
		padding: 20upx;
		box-sizing: border-box;
		/* background-color: #4cd964; */
		flex-direction: row;
		align-items: center;
	}




	.icon {
		margin: 50% 35rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.type {
		margin: 30rpx 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;

		.item {
			border-radius: 10rpx;
			width: 44%;
			height: 120rpx;
			background-color: #F7F7F7;
			display: flex;
			align-items: center;
			margin: 15rpx;

		}

		.name {
			font-size: 24rpx;
			color: #000;
			line-height: 130rpx;
		}
	}



	.index_23 {
		line-height: 40rpx;
		height: 40rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-start;
		width: 100%;
		background-color: #F6F9FF;
		align-items: center;

		.index_24 {
			width: 50rpx;
			height: 50rpx;
			// display: flex;
			margin-left: 30rpx;
			margin-top: 10rpx;
			height: 40rpx;
		}

		.index_25 {
			line-height: 50rpx;
			height: 40rpx;
			color: #666666;

		}
	}

	.big_box {
		margin-top: 0rpx;
		width: 100%;
		height: 400rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		.tips {
			position: absolute;
			padding: 5rpx 10rpx;
			background-color: #5490FE;
			color: #FFFFFF;
			top: 10rpx;
			left: 0rpx;
		}

		.big_btn {
			// position: absolute;
			height: 280rpx;
			width: 280rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			border: 10rpx solid #F86468;

			.btn {
				box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(0, 0, 0, .1);
				width: 230rpx;
				height: 230rpx;
				background-color: #5490FE;
				border-radius: 50%;
				display: flex;
				font-size: 34rpx;
				font-weight: 500;
				justify-content: center;
				color: #FFFFFF;
				// transform: translateX(-50%);
				line-height: 230rpx;
			}
		}
	}

	.warp_center {
		// display: block;
		width: 100%;
		margin-top: 30rpx;
		text-align: center;
	}



	.kef {
		margin-top: 30rpx;
		text-align: center;
		color: #666666;
		font-size: 32rpx;
	}

	.footer {
		width: 100%;
		padding: 30rpx;


		.foo_box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 33.33%;
				margin-top: 20rpx;
			}
		}
	}
</style>
